<script setup>
import {ref} from "vue";
import {showToast} from 'vant';
import {useRouter} from "vue-router";
// 这个是showToast悬浮框的关键
import 'vant/es/toast/style';
import routes from "../config/routes.js";

// 获取路由对象
const router = useRouter();

// 导航栏标题
const DEFAULT_TITLE = "伙伴匹配";
const title = ref(DEFAULT_TITLE);

/**
 * 设置页面标题的导航守卫
 * 全局前置守卫，在每次路由跳转前执行
 * to：即将要进入的目标路由对象
 * from：当前导航正要离开的路由对象
 */
router.beforeEach((to,from) =>{
  const toPath = to.path;
  // 在routes数组中查找匹配当前路径的路由配置
  const route = routes.find((route) =>{
    return toPath == route.path;
  })
  title.value = route?.title || DEFAULT_TITLE;
})


// const onClickLeft = () => alert("左");
// const onClickRight = () => alert("右");
const onClickLeft = () =>{
  // 点击左边时跳回主页面
  // router.push('/')

  // 修改会跳转到上一页
  router.back();
}

const onClickRight = () =>{
  // 路由跳转，跳转到搜索页面
  router.push('/search')

}



// const active = ref("team");

// const onChange = (index) => showToast(`标签 ${index}`);

</script>

<template>
  <!--  顶部导航组件-->
  <van-nav-bar
      :title="title"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight">
    <template #right>
      <van-icon name="search" size="18"/>
    </template>

  </van-nav-bar>

  <!--  页面跳转内嵌-->
  <!--  <div id="content">-->
  <!--    <template v-if="active === 'index'">-->
  <!--      <Index></Index>-->
  <!--    </template>-->
  <!--    <template v-if="active === 'team'">-->
  <!--      <Team></Team>-->
  <!--    </template>-->

  <!--  </div>-->
<!--  使用路由-->
  <div id="content">
<!--   路由动态加载-->
    <router-view></router-view>
  </div>


  <!--底部Tabbar标签栏-->
  <!--  <van-tabbar v-model="active" @change="onChange">-->
  <!--    <van-tabbar-item icon="home-o" name="index">主页</van-tabbar-item>-->
  <!--    <van-tabbar-item icon="search" name="team">队伍</van-tabbar-item>-->
  <!--    <van-tabbar-item icon="friends-o" name="user">个人</van-tabbar-item>-->
  <!--  </van-tabbar>-->

  <van-tabbar route @change="onChange">
    <van-tabbar-item to="/" icon="home-o" name="index">主页</van-tabbar-item>
    <van-tabbar-item to="/team" icon="search" name="team">队伍</van-tabbar-item>
    <van-tabbar-item to="/user" icon="friends-o" name="user">个人</van-tabbar-item>
  </van-tabbar>


</template>

<style scoped>
#content{
  padding-bottom: 50px;
}

</style>